import React from 'react';
import { connect } from 'dva';
import moment from 'moment';
import { Form, Modal, Table, Button } from 'antd';
import Ellipsis from '@/components/Ellipsis';

const changetoViewText = text => {
  if (text === 'cust_price') {
    return '客单价';
  }
  if (text === 'uv') {
    return 'UV';
  }
  if (text === 'conversion_rate') {
    return '转化率';
  }
  if (text === 'forecast_sale') {
    return '最终预测值';
  }
  if (text === 'forecast_sale1') {
    return '算法预测值';
  }
  if (text === 'forecast_sale2') {
    return '大数据调整值';
  }
  if (text === 'forecast_sale3') {
    return '运营调整值';
  }
  if (text === 'gmv') {
    return 'GMV';
  }
  return text;
};

@Form.create()
@connect(({ gmvConf, forecastResult, loading }) => ({
  gmvConf,
  forecastResult,
  frLoading: loading.models.forecastResult,
  gmvLoading: loading.models.gmvConf,
}))
class OptLogView extends React.Component {
  static defaultProps = {
    values: {
      id: 0,
    },
    modalVisible: false,
    handleModalVisible: () => {},
  };

  columns = [
    {
      title: '修改日期',
      dataIndex: 'created',
      render: (text, record) => {
        if (text === null) return null;
        return moment.unix(record.created).format('YYYY-MM-DD HH:mm:ss');
      },
    },
    { title: '修改人', dataIndex: 'creator' },
    {
      title: '修改属性',
      dataIndex: 'field',
      render: text => <span>{changetoViewText(text)}</span>,
    },
    { title: '原值', dataIndex: 'oldValue' },
    { title: '新值', dataIndex: 'newValue' },
    {
      title: '备注',
      dataIndex: 'comments',
      render: text => (
        <div style={{ width: 120 }}>
          <Ellipsis tooltip lines={1}>
            {text}
          </Ellipsis>
        </div>
      ),
    },
  ];

  constructor(props) {
    super(props);
    this.state = {
      data: [],
    };
    this.formLayout = {
      labelCol: { span: 7 },
      wrapperCol: { span: 13 },
    };
  }

  componentDidMount() {
    const {
      dispatch,
      values: { id },
      viewType,
    } = this.props;
    let urlType = 'gmvConf/fetchOptLog';
    if (viewType === 'result') {
      urlType = 'forecastResult/fetchOptLog';
    }
    dispatch({
      type: urlType,
      payload: id,
      callback: data => {
        this.setState({
          data,
        });
      },
    });
  }

  render() {
    const { modalVisible, handleModalVisible } = this.props;
    const { data } = this.state;
    return (
      <Modal
        destroyOnClose
        width={740}
        style={{ top: 20 }}
        bodyStyle={{ padding: '0px 5px' }}
        title="操作日志展示"
        visible={modalVisible}
        onCancel={() => handleModalVisible()}
        onOk={() => handleModalVisible()}
        footer={[
          <Button key="back" onClick={() => handleModalVisible()}>
            关闭
          </Button>,
        ]}
      >
        <Table size="small" columns={this.columns} dataSource={data} rowKey={record => record.id} />
      </Modal>
    );
  }
}

export default OptLogView;
